/*
    loader: 1. 下载 2. 使用（配置loader）
    plugins：1. 下载 2. 引入 3. 使用
*/

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname 是nodejs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')

    },
    // loader的配置
    module: {
        rules: [
            // 详细loder的配置
            {
                test: /\.css$/,
                // 使用哪些loder进行处理
                use: [
                    // use数组中loader执行顺序：从右到左，从下到上 依次执行
                    // 创建style标签，将js中的样式资源插入禁区，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                // 下面的loader顺序不能变，因为是从下往上执行的
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader',
                ]
            }
        ]
    },
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默认回创建一个空的HTML， 引入打包输出的所有资源（JS/CSS）
        // 需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源
            template: './src/index.html'
        })
    ],
    mode: 'development', // 开发模式
    // mode: 'production',
}